<template>
    <div class="h-full">
        <el-form :inline="true" :model="searchform">
            <div class="flex justify-between mb-3">
                <el-space>
                    <el-button size="default" type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-space>
                <el-space>

                    <el-form-item label="动作名称">
                        <el-input v-model="searchform.name" placeholder="请输入动作名称" clearable style="width: 200px"/>
                    </el-form-item>

                    <el-form-item label="类型">
                        <el-select v-model="searchform.type" placeholder="请选择类型" clearable style="width: 200px">
                            <el-option label="新手区" :value="1"></el-option>
                            <el-option label="成长区" :value="2"></el-option>
                            <el-option label="老手区" :value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="目录筛选">
                        <el-cascader v-model="searchform.catalogId" :options="treeData" :props="{label:'name',value:'id'}" style="width: 250px" :emitPath="false" clearable/>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                        <el-button @click="onRefresh" :icon="Refresh">重置</el-button>
                    </el-form-item>

                </el-space>
            </div>
        </el-form>
        <div class="table-section grid" style="height:calc(100% - 32px - 50px);">
            <el-table ref="tableRef" :data="tableData" border row-key="id" height="100%">
                <el-table-column prop="name" label="动作标题" align="center"/>
                <el-table-column prop="orderNum" label="排序" align="center"/>
                <el-table-column prop="likeCount" label="点赞数量" align="center"/>
                <el-table-column prop="completeCount" label="完成数量" align="center"/>
                <el-table-column prop="status" label="显示状态" align="center">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status===1">显示</el-tag>
                        <el-tag type="info" v-else>隐藏</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="createdAt" label="创建时间" align="center"/>


                <el-table-column fixed="right" label="操作" align="center" width="300">
                    <template #default="scope">

                        <el-tooltip content="已完成用户" placement="top">
                            <el-button :icon="Postcard" circle plain @click="openDialog('complete',scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="点赞用户" placement="top">
                            <el-button type="success" :icon="Pointer" circle plain @click="openDialog('like',scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="素材" placement="top">
                            <el-button type="warning" :icon="PictureFilled" circle plain @click="openDialog('material',scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :icon="Delete" circle plain @click="deleteItem(scope.row)"/>
                        </el-tooltip>

                        <el-tooltip content="编辑" placement="top">
                            <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)"/>
                        </el-tooltip>

                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!--  添加项目弹框  -->
    <dialog-add-edit ref="dialog-add-edit-ref" @update="getList"></dialog-add-edit>
    <!--  添加轮播弹框  -->
    <dialog-material ref="dialog-material-ref"></dialog-material>
    <!-- 点赞用户 -->
    <dialog-like ref="dialog-like-ref"></dialog-like>
    <!-- 完成用户 -->
    <dialog-complete ref="dialog-complete-ref"></dialog-complete>


</template>
<script setup>
import { ref, reactive, onMounted, useTemplateRef } from 'vue'
import { Delete, Edit, Search, Plus, Select, PictureFilled, Pointer, Postcard, Refresh } from '@element-plus/icons-vue'
import motionApi from '@/api/model/motion.js'
import motionCatalogApi from '@/api/model/motion-catalog.js'

import DialogAddEdit from './dialog-add-edit.vue'
import DialogMaterial from './dialog-material.vue'
import DialogLike from './dialog-like.vue'
import DialogComplete from './dialog-complete.vue'

// 定义弹框ref
const dialogLikeRef = useTemplateRef('dialog-like-ref')
const dialogEditRef = useTemplateRef('dialog-add-edit-ref')
const dialogMaterialRef = useTemplateRef('dialog-material-ref')
const dialogCompleteRef = useTemplateRef('dialog-complete-ref')

const openDialog = (type, item) => {
    if (type === 'add' || type === 'update') {
        dialogEditRef.value.openDialog(type, item)
    }
    if (type === 'material') {
        dialogMaterialRef.value.openDialog(type, item)
    }

    if (type === 'like') {
        dialogLikeRef.value.openDialog(type, item)
    }

    if (type === 'complete') {
        dialogCompleteRef.value.openDialog(type, item)
    }
}

/**
 *  获取动作列表
 */
const searchform = reactive({
    name: '',
    catalogId: '',
    type: ''
})
const tableData = ref([])
const getList = async () => {
    const catalogId = Array.isArray(searchform.catalogId) ? searchform.catalogId[searchform.catalogId.length - 1] : searchform.catalogId
    const { code, data = [] } = await motionApi.list.get({
        catalogId: catalogId,
        keyword: searchform.name,
        type: searchform.type
    })
    tableData.value = data
}
getList()

/**
 * 重置操作
 */
const onRefresh = () => {
    tableData.page = 1
    searchform.name = ''
    searchform.catalogId = ''
    searchform.type = ''
    getList()
}

/**
 * 删除操作
 * @param item
 */
function deleteItem (item) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code, data = [] } = await motionApi.delete.post({ id: item.id })
        if (code === 200) {
            ElMessage.success('删除成功')
            onRefresh()
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

/**
 *  获取目录列表
 */
const treeData = ref([])
const getCateList = async () => {
    const { code, data = [] } = await motionCatalogApi.tree.get()
    treeData.value = data

    console.log(treeData.value)
}
getCateList()

</script>


<style lang="less">

</style>
